<!-- 门诊人均费用/住院治疗收入 -->
<template>
    <div id="outpatientCost"></div>
</template>
<script>
import * as echarts from "echarts";
import { getOutpatientCostData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        this.setEcharts()
    },
    methods: {
        //设置echarts
        setEcharts() {

            let data = [{ VALUE1: Mock.Random.integer(15000, 20000), VALUE2: Mock.Random.integer(20000, 30000) },
            { VALUE1: Mock.Random.integer(13000, 20000), VALUE2: Mock.Random.integer(19000, 25000) },
            { VALUE1: Mock.Random.integer(11000, 20000), VALUE2: Mock.Random.integer(17000, 20000) },
            { VALUE1: Mock.Random.integer(9000, 15000), VALUE2: Mock.Random.integer(15000, 20000) },
            { VALUE1: Mock.Random.integer(5000, 10000), VALUE2: Mock.Random.integer(10000, 15000) }]
            let data1 = [];
            let data2 = [];
            data.forEach((item) => {
                data1.push(parseInt(item.VALUE1));
                data2.push((parseInt(item.VALUE2) / 10000).toFixed(2));
            });
            let outpatientCost = echarts.init(
                document.getElementById("outpatientCost")
            );
            let option = {
                tooltip: {},
                grid: {
                    top: "8%",
                    left: "0%",
                    right: "0%",
                    bottom: "3%",
                    containLabel: true,
                },
                legend: {
                    itemGap: 50,
                    data: ["门诊人均费用", "住院治疗收入"],
                    textStyle: {
                        color: "#fff",
                        fontSize: 16,
                        borderColor: "#fff",
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: true,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: false,
                            lineStyle: {
                                color: "#f9f9f9",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                fontSize: 16,
                                color: "#d1e6eb",
                                margin: 0,
                            },
                        },
                        data: [
                            "人民医院",
                            "二院",
                            "中医院",
                            "妇幼保健",
                            "乡镇卫生院",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        min: 0,
                        // max: 140,
                        splitNumber: 7,
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#0a3256",
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 20,
                            textStyle: {
                                fontSize: 16,
                                color: "#d1e6eb",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "门诊人均费用",
                        type: "line",
                        // smooth: true, //是否平滑曲线显示
                        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbol: "emptyCircle",
                        symbolSize: 6,
                        lineStyle: {
                            normal: {
                                color: "#28ffb3", // 线条颜色
                            },
                            borderColor: "#fff",
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "#fff",
                                fontSize: 16,
                            },
                            formatter: (params) => {
                                return `${params.value}元`;
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "#fff",
                                fontSize: 16,
                            },
                        },
                        tooltip: {
                            show: false,
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(0,154,120,1)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(0,0,0, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            },
                        },
                        data: data1,
                    },
                    {
                        name: "住院治疗收入",
                        type: "bar",
                        barWidth: 20,
                        tooltip: {
                            show: false,
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "#fff",
                                fontSize: 16,
                            },
                            formatter: (params) => {
                                return `${params.value}万元`;
                            },
                        },
                        itemStyle: {
                            normal: {
                                // barBorderRadius: 5,
                                // color: new echarts.graphic.LinearGradient(
                                //     0, 0, 0, 1,
                                //     [{
                                //             offset: 0,
                                //             color: '#14c8d4'
                                //         },
                                //         {
                                //             offset: 1,
                                //             color: '#43eec6'
                                //         }
                                //     ]
                                // )
                                color: function (params) {
                                    var colorList = [
                                        "#0ec1ff",
                                        "#10cdff",
                                        "#12daff",
                                        "#15ebff",
                                        "#17f8ff",
                                        "#1cfffb",
                                        "#1dfff1",
                                    ];
                                    return colorList[params.dataIndex];
                                },
                            },
                        },
                        data: data2,
                    },
                ],
            };
            outpatientCost.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#outpatientCost {
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
</style>